<!-- <ul class="pagination pagination-sm no-margin pull-right">
	<li><a class="first">首页</a></li>
	<li><a class="pre"></a></li> -->
<nav aria-label="Page navigation">
	<ul class="pagination pagination-sm no-margin pull-right">
		<li>
			<span aria-hidden="true" class="first">首页</span>	
		</li>
		<li id="after">
		 <span aria-hidden="true" class="pre">上一页</span>
		</li>
		<li class="pageIndex">
			<span>1</span>
		</li>
		<li>
			<span aria-hidden="true" class="next">下一页</span>
		</li>
		<li>
			<span aria-hidden="true" class="last">尾页</span>
		</li>
		<li class="disabled">
			<div class="btn-group dropup">
				<button type="button" class="btn btn-default btn-sm btn-size">显示条数(10)</button>
				<button type="button" class="btn btn-default dropdown-toggle  btn-sm"
					data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					<span class="caret"></span> <span class="sr-only"></span>
				</button>
				<ul class="pagination-sm no-margin pull-right dropdown-menu">
					<li><a class="btn-default">默认(10)</a></li>
					<li><a class="btn-5">每页显示5条</a></li>
					<li><a class="btn-30">每页显示30条</a></li>
					<li><a class="btn-50">每页显示50条</a></li>
					<li><a class="btn-100">每页显示100条</a></li>
				</ul>
			</div>
		</li>
		<li class="disabled">
			<span aria-hidden="true" class="rowCount">总记录数(0)</span>
		</li>
		<li class="disabled">
			<span aria-hidden="true" class="pageCount">总页数(0)</span>
		</li>
		<li class="disabled">
			<span aria-hidden="true" class="pageCurrent">当前页(1)</span>
		</li>
	</ul>
</nav>
<script type="text/javascript">
function doSetPagination(pageObject){//Pagination--分页
	doSetPageIndex(pageObject);
	$(".rowCount").html(`总记录数(${pageObject.rowCount})`);
	$(".pageCount").html(`总页数(${pageObject.pageCount})`);
	$(".pageCurrent").html(`当前页(${pageObject.pageCurrent})`);
	$(".btn-size").html(`显示条数(${pageObject.pageSize})`);
	/*上边这里也可以写为:
	$(".rowCount").html("总记录数("+pageObject.rowCount+")");
	$(".pageCount").html("总页数("+pageObject.pageCount+")");
	$(".pageCurrent").html("当前页("+pageObject.pageCurrent+")");*/
	//将总页码设置为pageId的参数
	$("#pageId").data("pageCount",pageObject.pageCount);
	//将当前页设置为pageId的参数
	$("#pageId").data("pageCurrent",pageObject.pageCurrent);
	$("#pageId").data("pageSize",pageObject.pageSize);
	//上边的代码也可以写为:
	//$("#pageId").data({"pageCount":pageObject.pageCount,"pageCurrent":pageObject.pageCurrent});
}
$(function(){
	//在页面加载完成绑定跳转页面按钮点击事件
	$("#pageId").on("click",".first,.pre,.next,.last",doJumpToPage);
	//在页面加载完成绑定分页显示数量选择事件
	$("#pageId").on("click",".btn-default,.btn-5,.btn-30,.btn-50,.btn-100",doSetPageSize);
});
//条转到指定的页码值页面
function doJumpOnIndex(index){
	//获取当前页码
	var pageCurrent = $("#pageId").data("pageCurrent");
	//判断如果点击等于当前页则return
	if(pageCurrent == index) return;
	//不等于则修改当前页为点击的页码
	$("#pageId").data("pageCurrent",index);
	//基于新的页码执行查询
	doGetObjects();
}
//上一页下一页首页末页判断
function doJumpToPage(){
	//获取被点击对象中的class属性 -- this指向被点击的对象  prop为获取属性值的函数
	var cls = $(this).prop("class");
	//获取存在pageCount域中的页码值
	var pageCount = $("#pageId").data("pageCount");
	var pageCurrent = $("#pageId").data("pageCurrent");
	//基于class属性值修改当前页码值
	//console.log(pageCount,pageCurrent);
	if(cls=="first"){//首页
		pageCurrent = 1;
	}else if(cls=="pre"&&pageCurrent>1){//上一页
		pageCurrent--;
	}else if(cls=="next"&&pageCurrent<pageCount){//下一页
		pageCurrent++;
	}else if(cls=="last"){//尾页
		pageCurrent = pageCount;
	}else{
		return;
	}
	$("#pageId").data("pageCurrent",pageCurrent);
	//3.基于新的页码执行新的查询
	doGetObjects();
}
//此方法实现选择页面显示数据数量--要求:选择后跳回到第一页开始,也需要携带显示页面数量的条数进行请求分页数据
function doSetPageSize(){
	//获取点击元素的class值
	var cls = $(this).prop("class");
	//设置默认pageSize值
	var pageSize = 10;
	//选择判断
	if(cls=="btn-default"){
		pageSize=10;
	}else if(cls=="btn-5"){
		pageSize=5;
	}else if(cls=="btn-30"){
		pageSize=30;
	}else if(cls=="btn-50"){
		pageSize=50;
	}else if(cls=="btn-100"){
		pageSize=100;
	}else{
		return;
	}
	//重新修改pageSize的值
	$("#pageId").data("pageSize",pageSize);
	//将当前页置为第一页
	$("#pageId").data("pageCurrent",1);
	//重新查询分页数据
	doGetObjects();
}
//设置5个页码,当前显示页码在正中间
function doSetPageIndex(pageObject){
	//先清除页标
	$(".pageIndex").remove();
	$(".active").remove();
	//获取当前页和总页码
	var pageCurrent = pageObject.pageCurrent;
	var pageCount = pageObject.pageCount;
	//获取上一页标签所在的元素
	var li = $("#after");
	//进行判断3种情况
	if(pageCurrent<4 || pageCount<6){//1,2,3--则不需要设置谁在中间 || 总页码不大于5,则全显示
		var length = pageCount>5 ? 5 : pageCount;
		//因为插入是向上一页后插入所以这块是倒序(应该有更好的方案)
		for(var i=length;i>=1;i--){
			li.after(doIndexSpan(i,pageCurrent));
		}
	}else if(pageCurrent>pageCount-3){//例10页,则为8,9,10--这也是不需要进行指定为中间页的
		for(var i=pageCount;i>=pageCurrent-5;i--){
			li.after(doIndexSpan(i,pageCurrent));
		}
	}else{//上边两个条件都不符合--能确定一定为大于5页,所以这里没有什么顾虑,直接动态化页数即可
		//设置开始的页码为当前页减2
		var start = pageCurrent-2;
		//设置结束的页码为当前页加2
		var end = pageCurrent+2;
		//进行添加
		for(var i=end;i>=start;i--){
			li.after(doIndexSpan(i,pageCurrent));
		}
	}
}
//创建页码标签返回给调用方
function doIndexSpan(index,pageCurrent){
	//active为bootstrap中的当前页属性,有颜色显示
	return`<li class=${index==pageCurrent?"active":"pageIndex"} onclick=doJumpOnIndex(${index})>
		   		<span>${index}</span>
		   </li>`;
}
</script>







